<template>
  <van-cell>
    <van-image
      slot="icon"
      round
      width="30"
      height="30"
      style="margin-right: 10px;"
      :src="item.aut_photo"
    />
    <span style="color: #466b9d;" slot="title">{{ item.aut_name }}</span>
    <div slot="label">
      <p style="color: #363636;">{{ item.content }}</p>
      <p>
        <span style="margin-right: 10px;">{{
          item.pubdate | relativeTime
        }}</span>
        <van-button
          size="mini"
          type="default"
          @click="$emit('click_reply', item)"
          >回复{{ item.reply_count }}</van-button
        >
      </p>
    </div>
    <!-- <van-icon slot="right-icon" name="like-o" /> -->
    <van-icon
      slot="right-icon"
      :color="item.like_count > 0 ? '#3296fa' : '#777'"
      :name="item.like_count > 0 ? 'good-job' : 'good-job-o'"
      @click="onClick"
      >{{ item.like_count > 0 ? item.like_count : "赞" }}</van-icon
    >
  </van-cell>
</template>
<script>
import { addCommentLike, deleteCommentLike } from "@/api/comment";
export default {
  props: {
    item: {
      type: Object,
      required: true
    }
  },
  methods: {
    async onClick() {
      try {
        if (this.item.is_liking) {
          // 取消点赞
          await deleteCommentLike(this.item.com_id);
        } else {
          // 点赞
          await addCommentLike(this.item.com_id);
        }
        this.item.is_liking ? this.item.like_count-- : this.item.like_count++;
        // 更新视图
        this.item.is_liking = !this.item.is_liking;
      } catch (error) {
        this.$toast.fail("操作失败");
      }
    }
  }
};
</script>
<style lang="less" scoped></style>
